<template>
  <div class="login">
    <!-- 顶部导航 -->
    <hmnavbar path="/find"></hmnavbar>
    <!-- 表单 -->
    <div class="content">
      <!-- 标题区域 -->
      <h4 class="title">您好，请登录</h4>
      <!-- 表单结构 -->
      <van-form ref="myform" @submit="login">
        <van-cell-group>
          <van-field
            :rules="rules.phone"
            v-model="form.phone"
            placeholder="请输入手机号"
            name="phone"
          >
            <template #left-icon>
              <i class="iconfont iconbianzu1 formicon"></i>
            </template>
          </van-field>
          <van-field
            :rules="rules.code"
            v-model="form.code"
            placeholder="请输入验证码"
          >
            <template #left-icon>
              <i class="iconfont iconyanzhengma formicon"></i>
            </template>
            <template #button>
              <span @click="getcode" class="code" v-if="totalTime === 6"
                >获取验证码</span
              >
              <span v-else>{{ totalTime }}s后重试</span>
            </template>
          </van-field>
          <div class="read">
            登录即同意<span class="wrod">《用户使用协议》</span>和<span
              class="wrod"
              >《隐私协议》</span
            >
          </div>
          <van-button type="danger" size="large" round>确定</van-button>
        </van-cell-group>
      </van-form>
    </div>
  </div>
</template>

<script>
// 导入网络请求的方法
import { getCodeApi, loginApi } from '../../api/login.js'
// 导入操作 local 的方法
import { setlocal } from '../../utils/local.js'
// 导入辅助函数
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      form: {
        phone: '18888881111',
        code: ''
      },
      // 验证的规则
      rules: {
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'onBlur' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '手机号不合法',
            trigger: 'onBlur'
          }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'onBlur' },
          {
            pattern: /\d{4}/,
            message: '验证码长度只能为4',
            trigger: 'onBlur'
          }
        ]
      },
      // 获取基地址
      baseURL: process.env.VUE_APP_URL,
      // 倒计时的时间
      totalTime: 6
    }
  },
  methods: {
    ...mapMutations(['setUserInfo', 'setIsLogin']),
    // 登录
    async login () {
      // 添加加载效果
      this.$toast({
        type: 'loading',
        message: '正在登录...'
      })
      try {
        // 提交登录的参数
        const res = await loginApi({
          mobile: this.form.phone,
          code: this.form.code
        })
        // 保存 jwt(token)
        setlocal('heimamm_web_token', res.data.jwt)
        // 保存用户信息（保存 vuex 中）
        // this.$store.commit('setUserInfo', res.data.user)
        this.setUserInfo(res.data.user)
        // 保存用户的登录状态（保存 vuex 中）
        this.setIsLogin(true)
        // 将所有的 toast 清除
        this.$toast.clear()
        // 添加判断：得到当前路径中的参数 _redirect
        var params = this.$route.query._redirect
        if (params) {
          // 如果参数存在：直接跳转到参数对应的路由中
          this.$router.push(params)
        } else {
          // 如果参数不存在：直接跳转到 `my` 页面
          this.$router.push('/my')
        }
      } catch (err) {
        // this.$toast.fail('出错啦')
        console.log('出错啦')
        // 可以做一些错误的处理方案
      }
    },
    // 获取验证码
    getcode () {
      // 验证手机号是否合法
      this.$refs.myform.validate(['phone']).then(async () => {
        // 添加一个 loading
        this.$toast.loading('正在获取验证码')
        // 设置一个定时器：用来进行倒计时
        const _inerval = setInterval(() => {
          // 总时长 --
          this.totalTime--
          // 判断
          if (this.totalTime <= 0) {
            clearInterval(_inerval)
            // 还原时间
            this.totalTime = 6
          }
        }, 1000)
        // 发送请求到服务器
        var res = await getCodeApi({
          mobile: this.form.phone
        })
        // 判断返回数据的正确性
        if (res.code === 200) {
          this.$toast.success(res.data)
          // 注意以下操作是纯粹的偷懒：大家千万不要学
          this.form.code = res.data
        } else {
          this.$toast.fail(res.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  .content {
    padding: 0 15px;
    .title {
      font-size: 18px;
      margin: 50px 0;
    }
    .formicon {
      padding-right: 20px;
    }
    .code {
      font-size: 16px;
      color: @color;
    }
    .read {
      font-size: 12px;
      margin-top: 15px;
      margin-bottom: 44px;
      .wrod {
        color: @color;
      }
    }
  }
}
</style>
